<template>
    <!-- 视唱题目展示demo 
	1. 播放
2. 录音，实时音高检测
3. 打拍子
4. 考核结果，具体的计算逻辑后续再说，先采集数据 
	-->
    <div>
        <!-- 乐谱展示 -->
        <musical-score :notation="demoData.code" />
        <!-- 录音 -->
        <audio-recorder />
        <!-- 音高检测 -->
        <pitch-monitoring />
        <!-- 音频播放 -->
        <!-- <beat-time />
        <audio-test />
         -->
    </div>
</template>

<script setup>
import { ref } from 'vue'
import beatTime from './beat-time.vue'
import audioTest from './audio-test.vue'
import pitchMonitoring from './pitch-monitoring.vue'
import audioRecorder from './audio-recorder.vue'
import musicalScore from './musical-score.vue'
import mainAudioMp3 from '@/assets/audio/main.mp3'
import subAudioMp3 from '@/assets/audio/sub.mp3'

// 响应式数据
const title = ref('小三度专项练习第28条')
// 使用测试音频文件，您需要将实际的音频文件放到 static/audio/ 目录下
const mainAudio = ref(mainAudioMp3) // 主音频文件
const subAudio = ref(subAudioMp3)   // 副音频文件
const isMixing = ref(true)

// 示例数据
const demoData = ref({
    "type": "sight",
    "code":`X:1
T:小三度专项练习第28条
M:4/4
L:1/4
V:1 clef=treble
K:C
"^①"[L:1/4] C E|D F|E G|"^②"F A|G B|A c|"^③"B d|c e|
[L:1/4] "^④"d f|e g|f a|"^⑤"g b|a c'|b d'|"^⑥"c' e'|d' f'|]`, 
    "lyricAudioUrl": mainAudio.value,
    "data": "", // 主要数据：这里是分句是具体信息，Text 文本类型
    "config": "", // 其他配置项：保留字段1暂未用到，Text 文本类型
    "other": "", // 其他配置项：保留字段2暂未用到，Text 文本类型
})


</script>
